import React, { useState } from 'react';
import { 
  Input, 
  Button, 
  Table, 
  Space, 
  Tag, 
  message,
  Card,
  Row,
  Col
} from 'antd';
import { 
  SearchOutlined,
  LockOutlined,
  UnlockOutlined
} from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';

// 商家数据类型
interface MerchantType {
  key: string;
  name: string;
  taxId: string;
  productCount: number;
  status: 'normal' | 'abnormal';
  entryTime: string;
  isLocked: boolean;
}

const Merchant: React.FC = () => {
  const [searchText, setSearchText] = useState('');
  const [filterStatus, setFilterStatus] = useState<'all' | 'normal' | 'abnormal'>('all');

  // 模拟商家数据
  const merchantData: MerchantType[] = [
    {
      key: '1',
      name: 'Apple',
      taxId: '0XXXX',
      productCount: 10,
      status: 'normal',
      entryTime: '2025/5/1 17:05',
      isLocked: true
    },
    {
      key: '2',
      name: 'Samsung',
      taxId: '1XXXX',
      productCount: 15,
      status: 'abnormal',
      entryTime: '2025/5/2 10:30',
      isLocked: false
    },
    {
      key: '3',
      name: 'Huawei',
      taxId: '2XXXX',
      productCount: 8,
      status: 'normal',
      entryTime: '2025/5/3 14:20',
      isLocked: true
    },
    {
      key: '4',
      name: 'Xiaomi',
      taxId: '3XXXX',
      productCount: 12,
      status: 'abnormal',
      entryTime: '2025/5/4 09:15',
      isLocked: false
    }
  ];

  // 根据筛选状态和搜索文本过滤数据
  const filteredData = merchantData.filter(item => {
    const matchesStatus = filterStatus === 'all' ? true :
                         filterStatus === 'normal' ? item.status === 'normal' :
                         filterStatus === 'abnormal' ? item.status === 'abnormal' : true;
    
    const matchesSearch = searchText === '' || 
                         item.name.toLowerCase().includes(searchText.toLowerCase()) ||
                         item.taxId.toLowerCase().includes(searchText.toLowerCase());
    
    return matchesStatus && matchesSearch;
  });

  // 处理锁定/解锁操作
  const handleToggleLock = (record: MerchantType) => {
    if (record.isLocked) {
      message.info('已冻结');
    } else {
      message.success('已解冻');
    }
  };

  // 表格列定义
  const columns: ColumnsType<MerchantType> = [
    {
      title: '商家名称',
      dataIndex: 'name',
      key: 'name',
      width: 120,
    },
    {
      title: '纳税识别号',
      dataIndex: 'taxId',
      key: 'taxId',
      width: 150,
    },
    {
      title: '上架产品数',
      dataIndex: 'productCount',
      key: 'productCount',
      width: 120,
    },
    {
      title: '经营状态',
      dataIndex: 'status',
      key: 'status',
      width: 100,
      render: (status: string) => (
        <Tag color={status === 'normal' ? 'green' : 'orange'}>
          {status === 'normal' ? '正常' : '异常'}
        </Tag>
      ),
    },
    {
      title: '入驻时间',
      dataIndex: 'entryTime',
      key: 'entryTime',
      width: 150,
    },
    {
      title: '操作',
      key: 'action',
      width: 100,
      render: (_, record) => (
        <Space size="small">
          <Button
            type="text"
            icon={record.isLocked ? <LockOutlined /> : <UnlockOutlined />}
            onClick={() => handleToggleLock(record)}
            title={record.isLocked ? '已冻结' : '已解冻'}
            style={{ color: record.isLocked ? '#ff4d4f' : '#52c41a' }}
          />
        </Space>
      ),
    },
  ];

  return (
    <div style={{ padding: '24px', background: '#f5f5f5', minHeight: '100vh' }}>
      <Card style={{ borderRadius: '8px' }}>
        {/* 顶部搜索区域 */}
        <Row justify="space-between" align="middle" style={{ marginBottom: '16px' }}>
          <Col>
            <Space>
              <span style={{ fontSize: '16px', fontWeight: 'bold' }}>商家列表</span>
              <Input
                placeholder="Search"
                prefix={<SearchOutlined />}
                value={searchText}
                onChange={(e) => setSearchText(e.target.value)}
                style={{ width: 300 }}
                allowClear
              />
            </Space>
          </Col>
        </Row>

        {/* 筛选按钮区域 */}
        <Row justify="space-between" align="middle" style={{ marginBottom: '16px' }}>
          <Col>
            <Space>
              <Button
                type={filterStatus === 'all' ? 'primary' : 'default'}
                onClick={() => setFilterStatus('all')}
                style={{ borderRadius: '6px' }}
              >
                全部
              </Button>
              <Button
                type={filterStatus === 'normal' ? 'primary' : 'default'}
                onClick={() => setFilterStatus('normal')}
                style={{ borderRadius: '6px' }}
              >
                正常
              </Button>
              <Button
                type={filterStatus === 'abnormal' ? 'primary' : 'default'}
                onClick={() => setFilterStatus('abnormal')}
                style={{ borderRadius: '6px' }}
              >
                异常
              </Button>
            </Space>
          </Col>
        </Row>

        {/* 表格区域 */}
        <Table
          columns={columns}
          dataSource={filteredData}
          pagination={{
            total: filteredData.length,
            pageSize: 10,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条/共 ${total} 条`,
          }}
          scroll={{ x: 800 }}
          rowKey="key"
        />
      </Card>
    </div>
  );
};

export default Merchant; 